<template>
	<view class="box">
		<view class="notification flex_r_around" :style="`background: url(${$util.prefix('game/notification-bg.png')}) 0 0 no-repeat;`" id="show">
			<view class="flex_c">
				<text>BOSS</text>
				<text>进场中{{ boss_run_percent }}%</text>
				<view class="boss-pregress">
					<view :style="`width: ${(boss_run_percent / 100) * 88}rpx;`">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			boss_run_percent: {
				type: Number,
				default: 0,
			},
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.notification {
		width: 196rpx;
		height: 176rpx;
		transform: translateY(-284rpx);
		transition: 0.8s;
		position: fixed;
		top: 108rpx;
		left: 10rpx;
		background-size: 100% !important;
		font-family: 'gongfu';
		padding-top: 10rpx;
		
		text {
			font-size: 20rpx;
			color: #893E07;
			line-height: 24rpx;
			text-align: right;
		}
		
	}
	
	#show {
		transform: translateY(0rpx);
		z-index: 2;
	}
	
	.boss-pregress {
		width: 88rpx;
		height: 14rpx;
		background: #F4F7BB;
		border-radius: 10rpx;
		margin-top: 6rpx;
		
		view {
			width: 48rpx;
			height: 14rpx;
			background: #8D440E;
			border-radius: 10rpx;
		}
	}
</style>
